import React from 'react'
import {Text,TouchableOpacity,View,StyleSheet} from 'react-native';
import screen from '../utils/screen';

import {getffly} from '../utils/common';
import LinearGradient from "react-native-linear-gradient";
import Constants from '../utils/Constants';



const OLBtn = ({style,title,onPress,fontsize})=>{
    const {width,height} = style
    return (
        <TouchableOpacity
            style={[styles.outlineBtn,style,{borderRadius: height/2}]}
            onPress={onPress}
        >
            <Text style={{color:'#377C74',fontSize:fontsize ?? 15}}>{title}</Text>
        </TouchableOpacity>
    )
}

const LGBtn = ({style,title,onPress,fontsize})=>{
    const {width,height} = style
    return (

        <LinearGradient colors={['#68B3AC', '#377C74']}
                            start={{ x: 0, y: 1 }}
                            end={{ x: 1, y: 0 }}
                            locations={[0, 1]}
                            style={[style,{   borderRadius: height/2 }]}>
            <TouchableOpacity
                    style={{flex:1,justifyContent: 'center', alignItems: 'center',}}
                    onPress={onPress}
                >
                <Text style={{  fontSize: fontsize ?? 15, color: '#FFFFFF' }}>{title}</Text>
            </TouchableOpacity>
        </LinearGradient>

    )
}

const GrayBtn = ({style,title})=>{
    return (
        <View style={ [styles.btnGray,style,{borderRadius:style.height/2}]}>
            <Text style={{color:'#fff',fontSize:15}}>{title}</Text>
        </View>
    )
}

const styles = StyleSheet.create({

    outlineBtn:{
        borderRadius:screen.PIXEL_40,borderWidth:2,borderColor:'#377C74',
        justifyContent: 'center',alignItems:'center'
    },btnGray:{
        backgroundColor:'#C1C1C1',height:screen.PIXEL_80,width:'100%',
        borderRadius:screen.PIXEL_40,justifyContent:'center',alignItems:'center'
    }
})

export {
    OLBtn,
    LGBtn,
    GrayBtn

}
